<template>
  <div class="progress-wrap" :style="`width: ${wd}`">
    <div class="progress-title">
      <div class="title">
        <span class="title">{{ title }}</span>
        <span class="num" :style="`color:${theme}`">&nbsp;{{ num }}&nbsp;</span>
        <span class="unit">{{ unit }}</span>
      </div>
      <span class="percent" :style="`color:${theme}`">{{ percent }}</span>
    </div>
    <div class="progress-box" :style="`width: ${wd};height: ${he};`">
      <div class="progress-bar" :style="`width: ${percent};background:${bg};`">
        <div class="dot"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DafosiControlWebProgressBar',
  props: {
    // 进度条宽度
    wd: {
      type: String,
      default: '12.5rem'
    },
    // 进度条高度
    he: {
      type: String,
      default: '0.625rem'
    },
    //  进度条进度
    percent: {
      type: String,
      default: '0%'
    },
    // 进度条背景色
    bg: {
      type: String,
      default: 'linear-gradient(to right,#2753A8, #00AFFF,#16FFFF);'
    },
    // 主题色
    theme: {
      type: String,
      default: ''
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 数量
    num: {
      type: String,
      default: ''
    },
    // 单位
    unit: {
      type: String,
      default: ''
    }
  },

  data() {
    return {};
  },

  mounted() {},

  methods: {}
};
</script>

<style lang="scss" scoped>
.progress-wrap {
  .progress-title {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0rem;
    .title,
    .percent {
      font-size: 0.875rem;
      height: 0.875rem; // 字体高度和内容高度一直 line-height为1
      line-height: 1;
    }
  }
  .progress-box {
    position: relative;
    background-color: #37455a;
    .progress-bar {
      height: 100%;
      position: relative;
      .dot {
        width: 1.625rem;
        height: 1.625rem;
        position: absolute;
        right: -0.8125rem;
        top: -0.6563rem;
        background-image: url("../../../assets/img/decisionAnalysis/light_dot.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
}
</style>
